<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-95%">
        <!--    回显-->
        <Descriptions class="m-b-50px" :schema="detailSchema" :data="descriptionsRow" />

        <!--    商品 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('orderReturn.shop') }}</span>
        </div>
        <!-- 商品列表 -->
        <el-table
          :data="tableShopList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderReturn.product_name')"
            prop="product_name"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.warehouses_name')"
            prop="warehouses_name"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.return_price')"
            prop="return_price"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.return_quantity')"
            prop="return_quantity"
            min-width="180"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!--    支付 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('orderReturn.paymentInformation') }}</span>
        </div>
        <!-- 支付信息列表 -->
        <el-table
          :data="tablePaymentList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderReturn.paid_amount')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="paid_amount"
          />
          <el-table-column
            :label="t('orderReturn.payment_method_name')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="payment_method_name"
          />
          <el-table-column
            :label="t('orderReturn.pay_time')"
            prop="pay_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.proofOfTransfer')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.transfer_voucher_url"
                style="width: 100px; height: 100px"
                :src="row.transfer_voucher_url"
                :preview-teleported="true"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[row.transfer_voucher_url]"
                fit="cover"
              />
            </template>
          </el-table-column>

          <el-table-column
            :label="t('orderReturn.paymentStatus')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="status_name"
          />
          <el-table-column
            :label="t('orderReturn.reviewTime')"
            prop="reviewer_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <!--      &lt;!&ndash;      时间线&ndash;&gt;-->
      <!--      <TimeLine class="w-25%" :data="timeLineList" />-->
      <!--      &lt;!&ndash;      支付信息审核弹框&ndash;&gt;-->
      <!--      <DialogAudit ref="DialogAuditRef" @refresh="getDetail" />-->
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
// import TimeLine from './components/TimeLine/index.vue'
import DialogAudit from './components/DialogAudit/index.vue'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getEnumApi } from '@/api/orderReturn'
import { useEnumeratePicker } from '@/utils'
import { getPayEnumApi } from '@/api/order/pay'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const DialogAuditRef = ref<InstanceType<typeof DialogAudit>>()

const tableLoading = ref<boolean>(false)

const tablePaymentList = ref<any[]>([])
const tableShopList = ref<any[]>([])
const tableOrderList = ref<any[]>([])

const timeLineList = ref<any[]>([])

const operatorList = ref<Array<Record<string, any>>>([])
const reasonList = ref<Array<Record<string, any>>>([])
const returnorderTypeList = ref<Array<Record<string, any>>>([])
const orderTypeList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([])

const descriptionsRow = ref<Record<string, any>>({})
const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'returnorder_no',
    label: t('orderReturn.returnorder_no')
  },
  {
    field: 'returnorder_type',
    label: t('orderReturn.returnorder_type'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(returnorderTypeList.value, data.returnorder_type)}</span>
      }
    }
  },
  {
    field: 'customer_name',
    label: t('orderReturn.customer_id')
  },
  {
    field: 'order_no',
    label: t('orderReturn.order_id')
  },
  {
    field: 'order_type',
    label: t('orderReturn.order_type'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(orderTypeList.value, data.order_type)}</span>
      }
    }
  },
  {
    field: 'signatory',
    label: t('orderReturn.signatory'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.signatory)}</span>
      }
    }
  },
  {
    field: 'signing_date',
    label: t('orderReturn.signing_date')
  },
  {
    field: 'owner',
    label: t('orderReturn.owner'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.owner)}</span>
      }
    }
  },
  {
    field: 'partner_value',
    label: t('orderReturn.partner')
  },
  {
    field: 'total_amount',
    label: t('orderReturn.total_amount')
  },
  {
    field: 'paid_amount',
    label: t('orderReturn.paid_amount')
  },
  {
    field: 'status',
    label: t('orderReturn.status'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(statusList.value, data.status)}</span>
      }
    }
  },
  {
    field: 'return_reason',
    label: t('orderReturn.return_reason'),
    span: 24,
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(reasonList.value, data.return_reason)}</span>
      }
    }
  },
  {
    field: 'remark',
    label: t('orderReturn.remark'),
    span: 24
  },
  // {
  //   field: 'return_status',
  //   label: t('orderReturn.return_status'),
  //   slots: {
  //     default: (data: Record<string, any>) => {
  //       return <span>{useEnumeratePicker(reasonList.value, data.return_reason)}</span>
  //     }
  //   }
  // },
  {
    field: 'create_time',
    label: '创建时间'
  },
  {
    field: 'creator',
    label: '创建人',
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.creator)}</span>
      }
    }
  },
  {
    field: 'update_time',
    label: '修改时间'
  }
])

//打开支付信息审核弹框
const handleAudit = (row: Record<string, any>) => {
  nextTick(() => {
    DialogAuditRef.value!.dialogVisible = true
    DialogAuditRef.value?.getBackShow(JSON.parse(JSON.stringify(row)))
  })
}

//跳转详情
const handleDetail = (row: Record<string, any>) => {
  push({
    path: `/order/order-management/detail`,
    query: { data: encodeURIComponent(JSON.stringify(row)) }
  })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  orderTypeList.value = resp.data.order_type
  operatorList.value = resp.data.operator
  reasonList.value = resp.data.return_reason
  returnorderTypeList.value = resp.data.returnorder_type
  statusList.value = resp.data.status
}

const getDetail = async () => {
  const resp = await getDetailApi(query.id as string)
  descriptionsRow.value = resp.data
  tablePaymentList.value = resp.data.payment_list
  tableShopList.value = resp.data.products_list
  tableOrderList.value = resp.data.order_list
  timeLineList.value = resp.data.logger
}

onMounted(() => {
  getDropDownBoxInfo()
  getDetail()
})
</script>
<style lang="less" scoped></style>
